<template>
  <div class="vote-result">
    <div class="overview">
      <div class="cups">
        <img :src="bestPlayers[1].USER_HEAD" class="rank-cup" id="second-cup" @click.stop.prevent="gameOtherDetail">
        <img :src="bestPlayers[0].USER_HEAD" class="rank-cup" id="first-cup" @click.stop.prevent="gameOtherDetail">
        <img :src="bestPlayers[2].USER_HEAD" class="rank-cup" id="third-cup" @click.stop.prevent="gameOtherDetail">
        <div class="rank-info" id="second-info">
          <div class="nickname">{{bestPlayers[1].NICKNAME}}</div>
          <div class="popularNum">(<i class="iconfont icon-huo"></i></i><span>{{bestPlayers[1].POPULAR_NUM}}</span>)</div>
        </div>
        <div class="rank-info" id="first-info">
          <div class="nickname">{{bestPlayers[0].NICKNAME}}</div>
          <div class="popularNum">(<i class="iconfont icon-huo"></i></i><span>{{bestPlayers[0].POPULAR_NUM}}</span>)
          </div>
        </div>
        <div class="rank-info" id="third-info">
          <div class="nickname">{{bestPlayers[2].NICKNAME}}</div>
          <div class="popularNum">(<i class="iconfont icon-huo"></i></i><span>{{bestPlayers[2].POPULAR_NUM}}</span>)
          </div>
        </div>
      </div>
      <div class="content">
        <div class="one">大王您只能为一个用户投出您<span>宝贵的一票</span></div>
        <div class="two">这票将决定TA的人气，珍惜哦~~</div>
      </div>
    </div>
    <div class="wave">
      <img src="~assets/images/bowen@3x.png" width="100%" height="40px">
    </div>

    <table class="table players">
      <thead>
      <tr>
        <td>序号</td>
        <td>参赛人</td>
        <td>人气</td>
      </tr>
      </thead>
    </table>
    <gj-loadmore :bottom-method="loadBottom" ref="loadmore">
      <table class="players table">
        <tbody class="playersList">
        <tr v-for="(item,index) in players">
          <td class="one">
            <i class="iconfont icon-paiming1" v-if="index == 0"></i>
            <i class="iconfont icon-paiming2" v-else-if="index == 1"></i>
            <i class="iconfont icon-paiming3" v-else-if="index == 2"></i>
            <span v-else :class="{'hund':index+1>99,'thousand':index+1>999,'wang':index+1>9999}">{{index+1}}</span>
          </td>
          <td class="two" @click.stop.prevent="gameOtherDetail">
            <img :src="item.USER_HEAD" class="userhead">
          </td>
          <td class="three" @click.stop.prevent="gameOtherDetail">
            <div class="nickname">{{item.NICKNAME}}</div>
          </td>
          <td class="four popularNum">{{item.POPULAR_NUM}}</td>
        </tr>
        </tbody>
      </table>
    </gj-loadmore>
  </div>
</template>

<script>
  import LocalDAO from 'common/localDAO'
  import RemoteDAO from 'common/remoteDAO'
  import CommonUtil from 'common/common.util'
  import LoadMore from 'components/LoadMore'

  export default {
    data(){
      return {
        players: [],
        bestPlayers: [
          {NICKNAME: '--', USER_HEAD: require('assets/images/tou1@2x.png'), POPULAR_NUM: '--'},
          {NICKNAME: '--', USER_HEAD: require('assets/images/tou1@2x.png'), POPULAR_NUM: '--'},
          {NICKNAME: '--', USER_HEAD: require('assets/images/tou1@2x.png'), POPULAR_NUM: '--'}
        ],
        pageSize: 20,
        pageNo: 1
      }
    },
    props: {
      gameId: {
        type: String
      },
      gameStep: {
        type: String
      },
      userCode: {
        type: String
      }
    },
    components: {
      'gj-loadmore': LoadMore
    },
    methods: {
      loadBottom() {
        this.fetchData();
      },
      fetchData(){
        let params = {
          gameId: this.gameId,
          pageSize: this.pageSize,
          pageNo: this.pageNo,
          USER_CODE: this.userCode
        };
//        self.players = [{"USER_CODE":"280177","VOTEFLAG":"0","POPULAR_NUM":"5","USER_HEAD":"http://dl.app.gtja.com/pictures/nrngimg/niurenimg/11010261.jpg","NICKNAME":"臭小子字数字数","SUBSCRIBE_PRICE":"0.000000"},{"USER_CODE":"7989729","VOTEFLAG":"0","POPULAR_NUM":"3","USER_HEAD":"http://dl.app.gtja.com/pictures/niutou/tou2@2x.png","NICKNAME":"赵英宇","SUBSCRIBE_PRICE":"0.000000"},{"USER_CODE":"5145513","VOTEFLAG":"0","POPULAR_NUM":"0","USER_HEAD":"https://dl.app.gtja.com/pictures/niutou/tou2@2x.png","NICKNAME":"家语ok","SUBSCRIBE_PIRCE":"0"},
//          {"USER_CODE":"7825369","VOTEFLAG":"0","POPULAR_NUM":"0","USER_HEAD":"https://dl.app.gtja.com/pictures/niutou/tou2@2x.png","NICKNAME":"大宝妹007","SUBSCRIBE_PIRCE":"0"}];
        RemoteDAO.callUC12008320(params, (response)=>{
          let list = [];
          if (Number(response.error) == 0) {
            list = response.data.body
            if (list.length > 0) {
              this.searchHeadNick(list);//批量查询用户最新的头像和昵称 并打印
            }else{
              this.$refs.loadmore.onBottomError('暂无数据');
            }
          } else {
            this.$refs.loadmore.onBottomError(response.data);//报错
          }
        });
      },
      /**
       *  批量查询用户最新的头像和昵称 并打印
       */
      searchHeadNick(list){
        let array = [];
        for (let i = 0; i < list.length; i++) {
          array.push(list[i].USER_CODE);
        }
        let userCodes = array.join(",")
        //批量查询用户
        RemoteDAO.callUC12008316(this.userCode, userCodes,(resp)=> {
          if (resp.error == "0") {
            let body = resp.data.body || [];
            //对批量查询的结果进行匹配赋值，因为批量查询接口是无序的
            for (let k = 0; k < list.length; k++) {
              list[k].SUBSCRIBE_PRICE = '0';
              list[k].NICKNAME = list[k].NICKNAME || "--";
              list[k].USER_HEAD = list[k].USER_HEAD || CommonUtil.getDefaultUserHead(list[k].USER_CODE);
              for (let i = 0; i < body.length; i++) {
                if (list[k].USER_CODE == body[i].USER_CODE) {
                  list[k].SUBSCRIBE_PRICE = CommonUtil.toFixed(body[i].SUBSCRIBE_PRICE, 0) || '0';
                  list[k].NICKNAME = body[i].NICKNAME || list[k].NICKNAME;
                  list[k].USER_HEAD = body[i].USER_HEAD || CommonUtil.getDefaultUserHead(list[k].USER_CODE);
                  break;
                }
              }
            }
            this.players = this.players.concat(list);
            this.bestPlayers[0] = {
              NICKNAME: this.players[0].NICKNAME,
              USER_HEAD: this.players[0].USER_HEAD,
              POPULAR_NUM: this.players[0].POPULAR_NUM
            };
            this.bestPlayers[1] = {
              NICKNAME: this.players[1].NICKNAME,
              USER_HEAD: this.players[1].USER_HEAD,
              POPULAR_NUM: this.players[1].POPULAR_NUM
            };
            this.bestPlayers[2] = {
              NICKNAME: this.players[2].NICKNAME,
              USER_HEAD: this.players[2].USER_HEAD,
              POPULAR_NUM: this.players[2].POPULAR_NUM
            };
            if(list.length<this.pageSize){
              this.$refs.loadmore.onBottomAllLoaded();//全部数据加载完成
            }else{
              this.pageNo = this.pageNo + 1;
              this.$refs.loadmore.onBottomLoaded(); //单次加载成功
            }
            LocalDAO.setGameVote({players: this.players})
          } else {
            this.$store.dispatch('setTip', {text: resp.data});
          }
        });
      },
      gameOtherDetail(){
        this.$store.dispatch('setTip', {text: "比赛已结束，仅展示排名"});
      }
    }
  }

</script>

<style lang="css" scoped>

</style>
